<template>
  <div class="mod-home">
    <div class="home-wrap">
      <div class="home-list-wrap mt10">
        <!--预警任务-->
        <div class="home-list bg-white">
          <div class="home-list-title">
            <span
              style="cursor: pointer"
              :v-loading="messageLoading"
              class="color-blue"
              @click="toxxtz(1)"
            >
              更多</span
            >
            <span
              style="cursor: pointer; margin-right: 10px"
              @click="getMessage"
              class="color-blue"
              :v-loading="messageLoading"
              >刷新</span
            >
            <i class="icon-01">预警通知</i>
          </div>
          <div class="home-list-content">
            <dl v-for="item in alertList" @click="delMessage(item)">
              <router-link :to="item.url">
                <dt>{{ item.createdate }}</dt>
                <dd>
                  {{ item.remark
                  }}<i><img src="../../assets/img/home_01.png" /></i>
                </dd>
              </router-link>
            </dl>
          </div>
        </div>
        <!--最近通知-->
        <div class="home-list bg-white" v-if="this.ggglstatus !== 'N'">
          <div class="home-list-title">
            <span
              style="cursor: pointer"
              :v-loading="messageLoading"
              class="color-blue"
              @click="toxxtz(2)"
              >更多</span
            >
            <span
              style="cursor: pointer; margin-right: 10px"
              class="color-blue"
              @click="getMessage"
              :v-loading="messageLoading"
              >刷新</span
            >
            <i class="icon-02">最近通知</i>
          </div>
          <div class="home-list-content">
            <dl v-for="item in messageList" :key="item.remark" @click="delMessage(item)">
              <dt v-if="item.url === 'NULL'">{{ item.createdate }}</dt>
              <dd v-if="item.url === 'NULL'">
                {{ item.remark
                }}<i><img src="../../assets/img/home_02.png" /></i>
              </dd>
              <router-link :to="item.url" v-else>
                <dt>{{ item.createdate }}</dt>
                <dd>
                  {{ item.remark
                  }}<i><img src="../../assets/img/home_02.png" /></i>
                </dd>
              </router-link>
            </dl>
          </div>
        </div>
        <!--公告-->
        <div class="home-list bg-white" v-if="this.ggglstatus == 'N'">
          <div class="home-list-title">
            <span
              style="cursor: pointer"
              :v-loading="messageLoading"
              class="color-blue"
              @click="toxxtz(4)"
              >更多</span
            >
            <span
              style="cursor: pointer; margin-right: 10px"
              @click="getMessagegggl"
              class="color-blue"
              :v-loading="messageLoading"
              >刷新</span
            >
            <i class="icon-02">通知/公告</i>
          </div>
          <div class="home-list-content">
            <dl v-for="item in noticeMessageList" :key="item.content" @click="showPreview(item)">
              <dt>{{ item.createdate }}</dt>
              <dd>
                {{ item.content
                }}<i><img src="../../assets/img/home_02.png" /></i>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <!--待办事项 20220818合并到develop分支时暂时隐藏-->
      <div class="home-list-wrap mt10">
        <div class="home-list bg-white">
          <div class="home-list-title">
            <span
              style="cursor: pointer"
              :v-loading="messageLoading"
              class="color-blue"
              @click="toxxtz(3)"
              >更多</span
            >
            <span
              style="cursor: pointer; margin-right: 10px"
              @click="getMessage"
              class="color-blue"
              :v-loading="messageLoading"
              >刷新</span
            >
            <i class="icon-04"> 待办事项 </i>
          </div>
          <div class="home-list-content">
            <el-col
              :span="8"
              v-for="(item, index) in waitHandleList"
              :key="index"
              style="padding: 10px"
            >
              <router-link
                :to="
                  item.remark == '1'
                    ? item.mxurl == null
                      ? item.url
                      : item.mxurl
                    : item.url
                "
              >
                <span @click="savemenuClick('首页待办', item.ywlx)">{{
                  item.ywlx
                }}</span>
                <span style="color: red">({{ item.remark }})</span>
              </router-link>
            </el-col>
          </div>
        </div>
        <!--最近通知-->
        <div class="home-list bg-white" v-if="this.ggglstatus == 'N'">
          <div class="home-list-title">
            <span
              style="cursor: pointer"
              :v-loading="messageLoading"
              class="color-blue"
              @click="toxxtz(2)"
              >更多</span
            >
            <span
              style="cursor: pointer; margin-right: 10px"
              @click="getMessage"
              class="color-blue"
              :v-loading="messageLoading"
              >刷新</span
            >
            <i class="icon-02">系统消息</i>
          </div>
          <div class="home-list-content">
            <dl v-for="item in messageList" :key="item.remark" @click="delMessage(item)">
              <dt v-if="item.url === 'NULL'">{{ item.createdate }}</dt>
              <dd v-if="item.url === 'NULL'">
                {{ item.remark
                }}<i><img src="../../assets/img/home_02.png" /></i>
              </dd>
              <router-link :to="item.url" v-else>
                <dt>{{ item.createdate }}</dt>
                <dd>
                  {{ item.remark
                  }}<i><img src="../../assets/img/home_02.png" /></i>
                </dd>
              </router-link>
            </dl>
          </div>
        </div>
      </div>
      <!--任务中心-->
      <div
        class="task-wrap bg-white mt20"
        v-if="this.ckbj == 1 || this.ckbj == 3"
      >
        <el-tabs v-model="activeNameXt" @tab-click="handleClickXt" type="card">
          <el-tab-pane label="任务中心" name="first">
            <span @click="taskClick" v-if="rwfqList.length > 0"
              >{{ taskText }}
              <i
                :class="taskShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i
            ></span>

            <div class="task-pic" v-show="taskShow">
              <dl v-for="item in rwfqList" :key="item.toobjectname">
                <router-link :to="item.toobjectid">
                  <dt>
                    <img
                      :src="
                        'http://114.113.68.130:8081/proxypic/homePic/' +
                        item.pic
                      "
                    />
                  </dt>
                  <dd>{{ item.toobjectname }}</dd>
                </router-link>
              </dl>
            </div>

            <div class="task-doc" style="position: relative">
              <div class="task-content" style="overflow: hidden">
                <!--左侧-->
                <div class="task-left-wrap">
                  <div class="task-left">
                    <div class="task-left-list" ref="Box">
                      <div
                        class="task-left-text"
                        v-for="dcrlwMenu in DclrwMenuList"
                        :key="dcrlwMenu.flowtype"
                      >
                        <h2
                          @click="getnodeDataArray(dcrlwMenu.flowtype)"
                          :class="{
                            'task-active': dclrwMenuVar == dcrlwMenu.flowtype,
                          }"
                        >
                          <i class="el-icon-my"></i
                          ><i
                            class="el-icon-caret-bottom"
                            v-if="
                              dclrwMenuVar == dcrlwMenu.flowtype &&
                              dcrlwMenu.flowtype === isShow
                            "
                          ></i
                          ><i v-else class="el-icon-caret-right"></i
                          >{{ dcrlwMenu.flowtypename
                          }}<span
                            style="color: #ff9900"
                            v-if="dcrlwMenu.cnt > 0"
                            >（{{ dcrlwMenu.cnt }}）</span
                          >
                        </h2>
                        <ul v-show="dcrlwMenu.flowtype === isShow">
                          <li
                            :class="{
                              'task-li-active': taskActive === list.nodeid,
                            }"
                            v-for="list in nodeDataArray"
                            :key="list.nodeid"
                            @click="
                              taskListClick(
                                list.nodeid,
                                dcrlwMenu.flowtypename,
                                list.text
                              )
                            "
                          >
                            {{ list.text | initSpilt
                            }}<em v-if="initSpiltNumber(list.text) != 0"
                              >（{{ list.text | initSpiltNumber }}）</em
                            ><i></i>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <!--右侧-->
                <div class="task-right">
                  <div
                    class="icon-box"
                    v-show="
                      (this.ckbj == 1 || this.ckbj == 3) && DclrwVisble == '01'
                    "
                  >
                    <i
                      class="el-icon-zoom-out icon"
                      :class="zoomOut ? 'disabled' : ''"
                      @click="zoom('out')"
                    ></i>
                    <i class="el-icon-zoom-in icon" @click="zoom('in')"></i>
                  </div>
                  <div
                    v-show="
                      (this.ckbj == 1 || this.ckbj == 3) && DclrwVisble == '01'
                    "
                    :class="
                      this.ckbj == 1 || this.ckbj == 3
                        ? ''
                        : 'fadeOut-animation'
                    "
                  >
                    <div id="myDiagramDiv" class="task-right-myDiagram"></div>
                  </div>
                  <div
                    class="task-right-list"
                    v-show="
                      (this.ckbj == 1 || this.ckbj == 3) && DclrwVisble == '02'
                    "
                    :class="
                      this.ckbj == 1 || this.ckbj == 3 ? '' : 'fadeIn-animation'
                    "
                  >
                    <h2
                      style="
                        font-size: 14px;
                        font-weight: normal;
                        color: #115699;
                        margin-right: 50px;
                        text-align: right;
                        padding-bottom: 10px;
                        cursor: pointer;
                      "
                      @click="clickBack"
                      v-if="this.ckbj == 1 || this.ckbj == 3"
                    >
                      返回<i class="el-icon-arrow-right"></i>
                    </h2>
                    <ul>
                      <li v-for="(item, index) in syDclrwList" :key="index">
                        <i>（{{ item.cnt }}）</i
                        ><router-link :to="syDclrwUrl(item)"
                          >{{ item.flowtypename }}-{{ item.parentnodename }}-{{
                            item.tonodename
                          }}</router-link
                        ><router-link
                          v-if="
                            item.parentnodename == '印数审批' &&
                            item.flowtypename == '加印不升位'
                          "
                          style="float: right; margin-right: 20px"
                          :to="syDclrwUrlyssp(item)"
                          ><i>批量处理</i></router-link
                        >
                      </li>
                    </ul>
                    <div class="null-text" v-if="isEmptyObject(syDclrwList)">
                      <p>暂无任务</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane :label="`待办选题(${totalCountDbxt})`" name="second">
            <!-- <table-search
              :objectname="objectnameDbxt"
              ref="tableid"
              tableRef="tableid"
              :data="dataListDbxt"
              stripe
              border
              height="400px"
              @cellClickHD="cellClick"
              style="width: 100%"
            >
              <el-table-column
                fixed="right"
                header-align="center"
                align="center"
                width="80"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="updateSelection(scope.row, '')"
                    >处理</el-button
                  >
                </template>
              </el-table-column>
            </table-search> -->
          </el-tab-pane>
          <el-tab-pane label="参与的选题" name="third">
            <!-- <table-search
              :objectname="objectnameCyxt"
              ref="table"
              tableRef="table"
              :data="dataListCyxt"
              stripe
              border
              height="400px"
              style="width: 100%"
            >
              <el-table-column
                header-align="center"
                align="center"
                width="80"
                fixed="right"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="viewSelection(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </table-search> -->
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// 删除未使用的组件导入
// import TableSearch from "../modules/commonMod/table-search";
import {   clearLoginInfo } from "@/utils";
import go from "gojs";
import ReconnectingWebSocket from "reconnecting-websocket";
// import Vue from "vue";

const MAKE = go.GraphObject.make;

export default {
  data() {
    return {
      objectnameDbxt: "DT_HOME_TASK_PENDING",
      objectnameCyxt: "DT_HOME_TASK_JOINING",
      // 移除未使用的 dataListYS
      webSocketUrl: window.SITE_CONFIG["sockerUrl"] + "/message/websocket",
      previewUrl: window.SITE_CONFIG["previewUrl"],
      minioAccessPath: window.SITE_CONFIG["minioAccessPath"],
      minioAccessPathYasuo: window.SITE_CONFIG["minioAccessPathYasuo"],
      minioPath: window.SITE_CONFIG["minioPath"],
      // 移除未使用的 dataList, url
      dataListDbxt: [],
      totalCountDbxt: 0,
      dataListCyxt: [],
      ggglstatus: "",
      userMenuVisible: false,
      userId: "",
      taskActiveName: "bianyin",
      publisherStyle: "",
      modelName: "",
      nodeid: "",
      dclrwMenuVar: "",
      DclrwVisble: "",
      activeName: "first",
      activeNameXt: "first",
      syDclrwList: [],
      rwfqList: [],
      messageList: [],
      alertList: [],
      waitHandleList: [],
      noticeMessageList: [],
      autoggglList: [],
      messageLoading: false,
      dialogVisible: false,
      checked: false,
      DclrwMenuList: [],
      sybj: "",
      ckbj: "",
      zoomOut: true,
      oldScale: "",
      isConnected: false,
      // 移除 User, Supplier
      nodeDataArray: [],
      linkDataArray: [],
      taskShow: false,
      isShow: "",
      taskText: "展开",
      taskActive: "",
      isadmin: "",
    };
  },

  components: {
    // TableSearch, // 只保留使用到的组件
  },
 
  created() {
    this.roleId = this.$store.state.user.roleId;
    this.userId = this.$store.state.user.id;
    this.initWebSocket();
  },

  activated() {
    //首页获取在线校验规则
    this.$store.dispatch("common/getPagesRules", {
      id: "tm01",
      name: "首页",
      params: {
        downloadFlag: "rules",
        filename: "rules_bw.json",
      },
    });
    this.publisherStyle = this.$store.state.user.publisherStyle;
    this.isadmin = this.$store.state.user.isadmin;
    this.roleId = this.$store.state.user.roleId;

    this.clickTaskTab(this.taskActiveName);

    //this.timer();
    this.getData();
    this.getRqfa();

    // 取 消息提示列表
    this.getCXZB();
    this.refreshSocket();
    this.getggglQX();
    if (this.myDiagram) {
      this.showHuabu(this.dclrwMenuVar);
    }

    this.savemenuClick("首页刷新", "");
    // 待办选题刷新
    this.getParticipation();
  },
  mounted() {
    this.getJurisdiction();
    // this.load();
    // this.getDclrwMenu()
    var lastTabID = localStorage.getItem(this.$store.state.user.id);
    if (lastTabID) {
      this.activeNameXt = lastTabID;
    }
  },
  methods: {
    getJurisdiction() {
      this.$http({
        url: this.$http.adornUrl("/ty/ty/getRedisValueByKey"),
        method: "get",
        params: this.$http.adornParams({
          key: this.$store.state.user.id + "_userEntity",
        }),
      }).then(({ data }) => {
        if (data && data.code == 0) {
          // 通过ysqx，设置this.ckbj值 【ID1005968】
          var obj = data.list;

          var ysqx = obj.syqx;

          if (ysqx && "BJ" == ysqx) {
            this.ckbj = 1;
          } else if (ysqx && "FX" == ysqx) {
            this.ckbj = 2;
          } else if (ysqx && "BJ,FX" == ysqx) {
            this.ckbj = 3;
          }

          this.getDclrwMenu();
        }
      });
    },
    cellClick(row, obj) {
      var parentnodeid = row.PARENTNODEID;
      if (parentnodeid && "xtsb" != parentnodeid && "xtbs" != parentnodeid) {
        parentnodeid = "xtsb";
      }
      this.$router.push({
        path: obj.mxurl,
        query: {
          id: row.PLANSNO,
          tit: row.PDCODE,
          pdsno: row.PDSNO,
          jumpPara: obj.jumpPara,
          parentnodeid: parentnodeid,
          tabs: true,
        },
      });
    },
    getParticipation() {
      this.$http({
        url: this.$http.adornUrl("/ty/ty/taskPending"),
        method: "get",
        params: this.$http.adornParams({
          pageIndex: 1,
          pageSize: 50,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataListDbxt = data.page.list;
          this.totalCountDbxt = data.page.totalCount;
        }
      });

      this.$http({
        url: this.$http.adornUrl("/ty/ty/taskJoin"),
        method: "get",
        params: this.$http.adornParams({
          pageIndex: 1,
          pageSize: 50,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // this.dataListCyxt = data.page.list
          this.dataListCyxt = data.page.list.map((item) => {
            // 假设你想要在item.name列前面拼接字符串'a'
            return {
              ...item,
              djcjdate: parseInt(item.djcjdate),
            };
          });
        }
      });
    },
    handleClickXt() {
      this.getParticipation();
      var currentTabID = this.$store.state.user.id;
      localStorage.setItem(currentTabID, this.activeNameXt);
    },
    //修改待办的选题
    updateSelection(row) {
      this.$http({
        url: this.$http.adornUrl(`/ty/ty/tyDclrw`),
        method: "post",
        data: this.$http.adornData({
          flowtype: row.FLOWTYPE,
          nodeid: row.TONODEID,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.tableList = data.sysFlowListcfg.tableList;
        } else {
          this.$message.error(data.msg);
        }
      });

      let obj = this.tableList.find((item) => {
        return item.islink == "1";
      });
      let tit = "";
      if (obj) {
        tit = row[obj.colname];
      }
      var parentnodeid = row.PARENTNODEID;
      this.$http({
        url: this.$http.adornUrl(`/ty/ty/lchCl`),
        method: "get",
        params: this.$http.adornParams({
          FLOWTYPE: row.FLOWTYPE,
          TONODEID: row.TONODEID,
          PLANSNO: row.PLANSNO,
          TOUSERID: row.TOUSERID,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (row["FLOWTYPE"] === "f20") {
            this.$router.push(
              row["NODEFORM"] +
                "?flowtype=" +
                row["FLOWTYPE"] +
                "&nodeid=" +
                row["TONODEID"] +
                "&plansno=" +
                row["PLANSNO"] +
                "&parentnodeid=" +
                row["PARENTNODEID"] +
                "&customerid=" +
                row["CUSTOMERID"] +
                "&jspch=" +
                row["PCH"] +
                "&tabs=true" +
                "&id=" +
                row["PLANSNO"] +
                (tit == "" ? "" : "&tit=" + tit)
            );
          } else if (row["FLOWTYPE"] === "f11") {
            this.$router.push(
              row["NODEFORM"] +
                "?flowtype=" +
                row["FLOWTYPE"] +
                "&nodeid=" +
                row["TONODEID"] +
                "&plansno=" +
                row["PLANSNO"] +
                "&batchno=" +
                row["BATCHNO"] +
                "&pdsno=" +
                row["PDSNO"] +
                "&chgbillno=" +
                row["CHGBILLNO"] +
                "&tabs=true" +
                "&id=" +
                row["PLANSNO"] +
                (tit == "" ? "" : "&tit=" + tit)
            );
          } else {
            this.$router.push(
              row["NODEFORM"] +
                "?flowtype=" +
                row["FLOWTYPE"] +
                "&nodeid=" +
                row["TONODEID"] +
                "&plansno=" +
                row["PLANSNO"] +
                "&batchno=" +
                row["BATCHNO"] +
                "&pdsno=" +
                row["PDSNO"] +
                "&parentnodeid=" +
                parentnodeid +
                "&tabs=true" +
                "&id=" +
                row["PLANSNO"] +
                (tit == "" ? "" : "&tit=" + tit)
            );
          }
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //查看参与选题
    viewSelection(row) {
      let flowtype;
      flowtype = "f01";
      this.$router.push({
        path: "bw-xtwh-xtwh-add-or-updateHq",
        query: {
          id: row.pdcode,
          // tit:row.pdcode,
          row: row,
          flowtype: flowtype,
          tabs: true,
        },
      });
    },
    //公告刷新
    getMessagegggl() {
      this.messageLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/pub/pubbulletin/listMessage`),
        method: "get",
        params: this.$http.adornParams({
          createby: this.userId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.noticeMessageList = data.noticeMessageList;
        }
      });
      this.messageLoading = false;
    },
    //点击展示公告预览
    showPreview(item) {
      var filename = "";
      filename = item.fileName;

      if ("1" == item.imageflag) {
        //图片

        var url = decodeURIComponent(item.miniourl);
        var replacedUrl = url;
        if (url.includes(this.minioAccessPathYasuo)) {
          replacedUrl = url.replace(
            this.minioAccessPathYasuo,
            this.minioAccessPath
          );
        }

        window.open(
          this.previewUrl +
            "/onlinePreview?url=" +
            encodeURIComponent(this.base64(replacedUrl))
        );
      } else {
        this.$http({
          url: this.$http.adornUrl("/ty/ty/getFileUrl"),
          method: "get",
          params: this.$http.adornParams({
            filename: encodeURIComponent(filename),
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            var url = decodeURIComponent(data.url);

            window.open(
              this.previewUrl +
                "/onlinePreview?url=" +
                encodeURIComponent(this.base64(url))
            );
          } else {
            this.$message.error("预览失败！");
          }
        });
      }
      this.delgggl(item);
    },

    base64(s) {
      return window.btoa(unescape(encodeURIComponent(s)));
    },
    //记录点击公告日志
    delgggl(item) {
      this.$http({
        url: this.$http.adornUrl(`/pub/pubbulletin/saveLog`),
        method: "post",
        data: this.$http.adornData(item),
      }).then(({ data }) => {
        if (data && data.code === 0) {
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //获取公告权限
    getggglQX() {
      this.$http({
        url: this.$http.adornUrl("/ty/ty/getRedisValueByKey"),
        method: "get",
        params: this.$http.adornParams({
          key: "GGGL",
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.autoggglList = data.list;
          if (
            this.autoggglList.paracode == "GGGL" &&
            this.autoggglList.paramvalue == "1"
          ) {
            //N代表是显示公告
            this.ggglstatus = "N";
          }
        }
      });
    },
    refreshSocket() {
      this.socket = this.$store.state.user.socket;
      if (!this.$store.state.user.socket) {
        this.isConnected = false;
        this.initWebSocket();
      } else {
        if (this.isConnected && this.socket) {
          // let onConnection = {
          //   method: "OnConnection",
          //   Authorization: Vue.cookie.get("token"),
          //   mobileDevice: false,
          // };
          this.socket.send(JSON.stringify(onConnection));
        }
      }
    },
    initWebSocket() {
      let socket = new ReconnectingWebSocket(this.webSocketUrl);

      //添加事件监听
      this.socket = socket;
      this.$store.commit("user/SET_SOCKET", this.socket);
      socket.onopen = () => {
        // var onConnection = {
        //   method: "OnConnection",
        //   Authorization: Vue.cookie.get("token"),
        //   mobileDevice: false,
        // };
        this.isConnected = true;
        socket.send(JSON.stringify(onConnection));
      };
      socket.onmessage = (event) => {
        let data = JSON.parse(event.data);
        //消息推送（消息公告用的）
        if (data.method == "messagePush") {
          if (data.content != null && JSON.parse(data.content).code == 0) {
            this.alertList = JSON.parse(data.content).alertList;
            this.messageList = JSON.parse(data.content).messageList;
            this.waitHandleList = JSON.parse(data.content).waitHandleList;
            this.noticeMessageList = JSON.parse(data.content).noticeMessageList;
          }
        }
        //用户过期
        if (data.method == "logout") {
          clearLoginInfo();
          socket.onclose = () => {
            this.socket = "";
            this.$store.commit("user/SET_SOCKET", this.socket);
            this.isConnected = false;
          };
        }
      };
      socket.onclose = (event) => {
        this.isConnected = false;
        this.socket = "";
        this.$store.commit("user/SET_SOCKET", this.socket);
      };

      //}
      //}
    },
    // 取 消息提示列表
    getMessage() {
      //alert(111);
      this.messageLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/syssetup/importmodel/messageList`),
        method: "get",
        params: this.$http.adornParams(/*{'ywlx': ywlx}*/),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.alertList = data.alertList;
          this.messageList = data.messageList;
          this.waitHandleList = data.waitHandleList;
        }
      });
      this.messageLoading = false;
    },
    delMessage(item) {
      this.$http({
        url: this.$http.adornUrl(`/syssetup/importmodel/messageUpdate`),
        method: "get",
        params: this.$http.adornParams({
          recordno: item.recordno,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.getMessage();
          // this.alertList=data.alertList;
          // this.messageList=data.messageList;
          // this.waitHandleList=data.waitHandleList;
        }
      });
    },
    toxxtz(id) {
      if (id == "1") {
        this.$router.push({
          path: "syssetup-message-notice",
          query: {
            id: "",
            flag: id,
            tabs: true,
          },
        });
      } else if (id == "2") {
        this.$router.push({
          path: "syssetup-message-notice",
          query: {
            id: "",
            flag: id,
            tabs: true,
          },
        });
      } else if (id == "3") {
        this.$router.push({
          path: "syssetup-message-notice",
          query: {
            id: "",
            flag: id,
            tabs: true,
          },
        });
      } else if (id == "4") {
        this.$router.push({
          path: "sys-announcements",
        });
      }
    },
    clickTaskTab(type) {
      this.taskActiveName = type;
      // this.getDclrwMenu()
    },
    taskClick() {
      this.taskShow = !this.taskShow;
      if (this.taskShow) {
        this.taskText = "收起";
      } else {
        this.taskText = "展开";
      }
    },
    taskListClick(id, item, data) {
      this.nodeid = id;
      this.taskActive = id;
      this.DclrwVisble = "02";
      this.getRqfa();
      this.savemenuClick("首页^" + item, data);
    },
    savemenuClick(flowtypename, str) {
      str = str.replace(/（\d+）/, "").replace(/\(\d+\)/, "");
      let method = str ? flowtypename + "^" + str : flowtypename;
      this.$http({
        url: this.$http.adornUrl("/sys/log/savemenuClick"),
        method: "post",
        data: this.$http.adornData({
          method: method,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
        }
      });
    },
    getCXZB() {
      var date = new Date();
      this.year = date.getFullYear();
    },
    getData() {
      this.$http({
        url: this.$http.adornUrl(`/sys/menu/shortcutList`),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.rwfqList = data.startMenuList;
        }
      });
    },
    getRqfa() {
      this.syDclrwList = [];
      this.$http({
        url: this.$http.adornUrl(`/ty/ty/syDclrwList`),
        method: "post",
        data: this.$http.adornData({
          flowtype: this.dclrwMenuVar,
          nodeid: this.nodeid,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.syDclrwList = data.syDclrwList;
        }
      });
    },
    syDclrwUrl(item) {
      return (
        "commonMod-common-dclrw?flowtype=" +
        item.flowtype +
        "&nodeid=" +
        item.tonodeid +
        "&plansno=" +
        item.plansno
      );
    },
    syDclrwUrlyssp(item) {
      return (
        "pub-pubyssp-listHq?flowtype=" +
        item.flowtype +
        "&nodeid=" +
        item.tonodeid +
        "&tonodename=" +
        item.tonodename +
        "&tatil=待处理"
      );
    },
    getDclrwMenu() {
      this.$http({
        url: this.$http.adornUrl(`/syssetup/sysflowtype/syDtLcWz`),
        method: "post",
        data: this.$http.adornData({
          version: this.taskActiveName,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // this.DclrwMenuList=data.dtlcwz
          this.DclrwMenuList = data.dtlcwz.filter(
            (item) => item.version === this.taskActiveName
          );
          if (this.DclrwMenuList != [] && this.DclrwMenuList != null) {
            this.dclrwMenuVar = this.DclrwMenuList[0].flowtype;
            this.DclrwVisble = "01";
            this.load();
            this.showHuabu(this.DclrwMenuList[0].flowtype);

            this.getRqfa(2);
          }
        }
      });
    },
    clickBack() {
      this.DclrwVisble = "01";
      this.taskActive = "";
    },
    getnodeDataArray(flowtype) {
      this.dclrwMenuVar = flowtype;
      this.DclrwVisble = "01";

      if (this.isShow === flowtype) {
        this.isShow = "";
        this.taskActive = "";
      } else {
        this.nodeDataArray = [];
        setTimeout(() => {
          this.isShow = flowtype;
        }, 100);
      }
      this.showHuabu(flowtype);
    },
    showHuabu(flowtype) {
      this.getRqfa(2);
      this.$http({
        url: this.$http.adornUrl(`/sys/sysflowplanrec/getSyBzData`),
        method: "post",
        data: this.$http.adornData({
          flowtype: flowtype,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          let nodeDataArray = data.nodeDataArray;
          for (let item of nodeDataArray) {
            item["background"] = "#4681b9";
          }
          this.nodeDataArray = nodeDataArray;

          if (this.nodeDataArray != null && this.nodeDataArray.length > 0) {
            let numCnt = 0;
            for (let i = 0; i < this.nodeDataArray.length; i++) {
              let text = this.nodeDataArray[i].text;
              if (text.indexOf("(") != -1) {
                numCnt += parseInt(
                  text.substring(text.indexOf("(") + 1, text.indexOf(")"))
                );
              }
            }
            this.DclrwMenuList.forEach((i) => {
              if (i.flowtype == flowtype) {
                i.cnt = numCnt == 0 ? "" : numCnt;
              }
            });
          }
          this.linkDataArray = data.linkDataArray;
          if (this.myDiagram) {
            this.layout(flowtype);
          }
        }
      });
    },
    load() {
      this.$nextTick(() => {
        this.init();
      });
    },
    layout(flowtype) {
      const thisPath = this;
      var myjson = {
        copiesArrays: true,
        copiesArrayObjects: true,
        nodeDataArray: this.nodeDataArray,
        linkDataArray: this.linkDataArray,
      };
      let kksz = 10;
      this.myDiagram.model = go.Model.fromJson(myjson);
      if (flowtype) {
        this.myDiagram.nodeTemplate = MAKE(
          go.Node,
          "Auto",
          {
            click: function (e, node) {
              thisPath.nodeid = node.part.data.nodeid;
              thisPath.DclrwVisble = "02";
              thisPath.taskActive = node.part.data.nodeid;
              thisPath.getRqfa(2);
            },
          },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
            go.Point.stringify
          ),
          MAKE(
            go.Shape,
            "Rectangle",
            {
              stroke: "#ececec",
              portId: "",
              fromLinkable: true,
              toLinkable: true,
              cursor: "pointer",
              toEndSegmentLength: 50,
              fromEndSegmentLength: 40,
            },
            new go.Binding("fill", "background")
          ),
          MAKE(
            go.TextBlock,
            "Page",
            {
              margin: kksz,
              stroke: "white",
              font: this.getOption(flowtype)["bigfont"],
              editable: true,
            },
            new go.Binding("text", "text").makeTwoWay()
          )
        );
      }

      this.zoomOut = true;
      this.oldScale = "";
      this.myDiagram.layoutDiagram(true);
    },
    getOption(flowtype) {
      let bigfont =
        flowtype == "f01"
          ? "14px Helvetica, Arial, sans-serif"
          : "14px Helvetica, Arial, sans-serif";
      let options = {
        yellowgrad: MAKE(go.Brush, "Linear", { 0: "#ececec", 1: "#ffffff" }),

        greengrad: MAKE(go.Brush, "Linear", { 0: "#98FB98", 1: "#9ACD32" }),

        bluegrad: MAKE(go.Brush, "Linear", { 0: "#4681b9", 1: "#4681b9" }),

        redgrad: MAKE(go.Brush, "Linear", { 0: "#C45245", 1: "#871E1B" }),

        whitegrad: MAKE(go.Brush, "Linear", { 0: "#F0F8FF", 1: "#E6E6FA" }),

        smallfont: "bold 6pt Helvetica, Arial, sans-serif",
      };
      options["bigfont"] = bigfont;

      return options;
    },
    zoom(type) {
      if (!this.oldScale) {
        this.oldScale = this.myDiagram.scale;
      }
      if (type == "out" && this.zoomOut) {
        return;
      }
      if (type == "in") {
        this.myDiagram.scale =
          this.oldScale < 1
            ? Number(this.myDiagram.scale) + 0.35
            : Number(this.myDiagram.scale) + 0.15;
        this.zoomOut = false;
      } else if (type == "out") {
        this.myDiagram.scale =
          this.oldScale < 1
            ? Number(this.myDiagram.scale) - 0.35
            : Number(this.myDiagram.scale) - 0.15;
      }
      if (this.myDiagram.scale <= this.oldScale) {
        this.myDiagram.scale = this.oldScale;
        this.zoomOut = true;
      }
    },
    init() {
      if (!this.myDiagram) {
        const thisPath = this;
        thisPath.dclrwMenuVar;

        const MAKE = go.GraphObject.make;
        this.myDiagram = MAKE(go.Diagram, "myDiagramDiv", {
          isReadOnly: true,
          "toolManager.mouseWheelBehavior": go.ToolManager.WheelNone,
          initialAutoScale: go.Diagram.Uniform,
          "linkingTool.direction": go.LinkingTool.ForwardsOnly,
          initialContentAlignment: go.Spot.Center,
          layout: MAKE(go.LayeredDigraphLayout, {
            isInitial: false,
            isOngoing: false,
            layerSpacing: 50,
          }),
          "undoManager.isEnabled": true,
        });
        this.myDiagram.nodeTemplate = MAKE(
          go.Node,
          "Auto",
          {
            click: function (e, node) {
              thisPath.nodeid = node.part.data.nodeid;
              thisPath.DclrwVisble = "02";
              thisPath.taskActive = node.part.data.nodeid;
              thisPath.getRqfa(2);
            },
          },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
            go.Point.stringify
          ),
          MAKE(
            go.Shape,
            "Rectangle",
            {
              stroke: "#ececec",
              portId: "",
              fromLinkable: true,
              toLinkable: true,
              cursor: "pointer",
              toEndSegmentLength: 50,
              fromEndSegmentLength: 40,
            },
            new go.Binding("fill", "background")
          ),
          MAKE(
            go.TextBlock,
            "Page",
            {
              margin: 10,
              stroke: "white",
              font: this.getOption(thisPath.dclrwMenuVar)["bigfont"],
              editable: true,
            },
            new go.Binding("text", "text").makeTwoWay()
          )
        );
        this.myDiagram.linkTemplate = MAKE(
          go.Link, // the whole link panel
          new go.Binding("points").makeTwoWay(),
          { curve: go.Link.Bezier, toShortLength: 15 },
          new go.Binding("curviness", "curviness"),
          MAKE(
            go.Shape, // the link shape
            { stroke: "#4682b8", strokeWidth: 1 }
          ),
          MAKE(
            go.Shape, // the arrowhead
            { toArrow: "kite", fill: "#4682b8", stroke: null, scale: 1 }
          )
        );
      }
      this.layout();
    },
    initSpiltNumber: function (value) {
      if (!value) return "";
      var NumberString = value;
      var resultNumber = NumberString.split("(");
      var resultNumber1 =
        resultNumber[1] == undefined ? "" : resultNumber[1].split(")");
      if (resultNumber1 != "") {
        for (var i = 0; i < resultNumber1.length; i++) {
          return resultNumber1[0];
        }
      } else {
        return 0;
      }
    },

    handleClick() {
      if (this.activeName === "first") {
        this.$nextTick(() => {
          this.getChartFH();
        });
      }
      if (this.activeName === "second") {
        this.$nextTick(() => {
          this.getChartTH();
        });
      }
      if (this.activeName === "third") {
        this.$nextTick(() => {
          this.getChartHK();
        });
      }
      if (this.activeName === "fourth") {
        this.$nextTick(() => {
          this.getChartFD();
        });
      }
    },
  },
  filters: {
    initSpilt: function (value) {
      if (!value) return "";
      var yourString = value;
      var result = yourString.split("(");
      for (var i = 0; i < result.length; i++) {
        return result[0];
      }
    },
    initSpiltNumber: function (value) {
      if (!value) return "";
      var NumberString = value;
      var resultNumber = NumberString.split("(");
      var resultNumber1 =
        resultNumber[1] == undefined ? "" : resultNumber[1].split(")");
      if (resultNumber1 != "") {
        for (var i = 0; i < resultNumber1.length; i++) {
          return resultNumber1[0];
        }
      } else {
        return 0;
      }
    },
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close();
    }
  },
  beforeRouteUpdate(to, from, next) {
    if (
      to.name === "home" &&
      to.query &&
      (to.query.type == "toggle" || to.query.type == "toggle-edit")
    ) {
      this.getJurisdiction();
      this.isConnected = false;
      this.socket.onclose();
      this.publisherStyle = this.$store.state.user.publisherStyle;
      this.isadmin = this.$store.state.user.isadmin;
      this.roleId = this.$store.state.user.roleId;
      this.userId = this.$store.state.user.id;
      this.clickTaskTab(this.taskActiveName);
      this.getData();
      this.getCXZB();
      this.refreshSocket();
      this.getggglQX();

      this.savemenuClick("首页刷新", "");
      // 待办选题刷新
      this.getParticipation();
      var lastTabID = localStorage.getItem(this.$store.state.user.id);
      if (lastTabID) {
        this.activeNameXt = lastTabID;
      }
    }
  },
};
</script>

<style>
.mod-home {
  max-width: 1200px;
  /*min-width: 1200px;*/
  margin: 0 auto;
  overflow: hidden;
}
/*.home-wrap{*/
/*width: 1200px;*/
/*margin: 0 auto;*/
/*overflow: hidden;*/
/*}*/
.bg-white {
  background: #fff;
}
.home-list-wrap {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.home-list {
  width: 49%;
  display: table-cell;
  padding: 10px 0 20px;
}
.home-list-title {
  font-family: "MicrosoftYaHeiUI-Bold";
  font-size: 18px;
  line-height: 50px;
  color: #115699;
  margin: 0 20px;
  border-bottom: 1px solid #e1e1e1;
}
.home-list-title span {
  float: right;
  font-size: 14px;
}
.home-list-title i.icon-01 {
  display: block;
  background: url("../../assets/img/home_03.png") no-repeat left center;
  padding-left: 30px;
}
.home-list-title i.icon-02 {
  display: block;
  background: url("../../assets/img/home_04.png") no-repeat left center;
  padding-left: 30px;
}
.home-list-title i.icon-03 {
  display: block;
  background: url("../../assets/img/home_17.png") no-repeat left center;
  padding-left: 30px;
}
.home-list-title i.icon-04 {
  display: block;
  background: url("../../assets/img/home_16.png") no-repeat left center;
  padding-left: 30px;
}
.home-list-content {
  max-height: 160px;
  overflow: scroll;
  overflow-x: auto;
  overflow-y: auto;
  padding: 10px 20px 0;
}
.home-list-content dl {
  display: block;
  line-height: 40px;
  padding: 0 10px;
}
.home-list-content dl:hover {
  background: #f5f5f5;
  cursor: pointer;
}
.home-list-content dl:hover dd {
  color: #ff6666;
}
.home-list-content dl dt {
  float: right;
  color: #999999;
}
.home-list-content dl dd {
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-list-content dl dd i {
  padding-left: 10px;
}
.home-list-width {
  width: 2%;
  display: table-cell;
}
.task-wrap {
  padding: 15px 20px 30px;
}
.task-header {
  width: 220px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
.task-header ul li {
  width: 50%;
  height: 37px;
  float: left;
  line-height: 37px;
  border-bottom: 1px solid #e1e1e1;
  text-align: center;
  cursor: pointer;
}
.task-header ul li.task-active-name {
  color: #4682b9;
  border-bottom: 1px solid #ff9900;
}
.task-title {
  border-bottom: 1px solid #e1e1e1;
  overflow: hidden;
  line-height: 35px;
  color: #115699;
  font-size: 18px;
  font-family: "MicrosoftYaHeiUI-Bold";
  background: url("../../assets/img/home_16.png") no-repeat left 8px;
  padding: 0 0 10px 30px;
}
.task-title span {
  float: right;
  width: 80px;
  height: 35px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  text-align: center;
  line-height: 35px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  margin-left: 10px;
}
.task-title span:hover {
  color: #115699;
  border: 1px solid #115699;
}
.task-pic {
  width: 100%;
  display: table;
  table-layout: fixed;
  border-bottom: 1px solid #e1e1e1;
}
.task-pic dl {
  /*display: table-cell;*/
  text-align: center;
  width: 12.5%;
  float: left;
  padding: 30px 0;
}
.task-pic dl:hover {
  background: #f5f5f5;
  cursor: pointer;
}
.task-pic dl dd {
  color: #666666;
  margin-top: 15px;
}
.task-content {
  position: relative;
  display: flex;
  min-height: 100%;
  height: 100%\0/;
  margin-top: 30px;
}
.task-left-wrap {
  /*flex: 0 0  240px;*/
  width: 210px;
  float: left;
  position: relative;
  margin-right: 10px;
  overflow: hidden;
}
.task-right {
  width: calc(100% - 211px);
  float: right;
  position: relative;
  overflow: hidden;
}
.task-left {
  width: 180px;
  float: left;
  height: 100%;
  border-right: 1px solid #e1e1e1;
  padding-bottom: 10px;
  margin-right: 0px;
}
.task-left-list {
  width: 220px;
  height: 360px;
  overflow-y: scroll;
}
.task-left-text {
  width: 180px;
}
.task-left-text h2 {
  display: block;
  line-height: 30px;
  font-size: 14px;
  font-weight: normal;
  position: relative;
  color: #333333;
  cursor: pointer;
}
/*.task-left-text h2 {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translate(0,-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #999999;
}*/
.task-left-text h2 .el-icon-my {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translate(0, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #999999;
}
.task-left-text h2.task-active {
  color: #4682b9;
  font-weight: bold;
}
/*.task-left-text h2.task-active i{
  background: #4682b9;
}*/
.task-left-text h2.task-active .el-icon-my {
  background: #4682b9;
}
.task-left-text ul li {
  display: block;
  line-height: 30px;
  padding: 0 25px;
  color: #666666;
  position: relative;
  cursor: pointer;
}
.task-left-text ul li em {
  color: #ff9900;
  font-size: 12px;
}
.task-left-text ul li.task-li-active,
.task-left-text ul li:hover {
  background: #f5f5f5;
  color: #115699;
}
.task-left-text ul li.task-li-active i {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translate(0, -50%);
  width: 17px;
  height: 10px;
  background: url("../../assets/img/home_05.png") no-repeat;
}
.task-left-text ul li.task-li-disabled,
.task-left-text ul li.task-li-disabled em {
  color: #ccc;
  cursor: initial;
}
.task-right-myDiagram {
  width: 100%;
  height: 280px;
  background-color: white;
  position: absolute !important;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.task-right .icon-box {
  user-select: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 8px;
  background: rgb(255, 255, 255);
  border-radius: 11px;
  border: 1px solid rgb(232, 233, 236);
  box-shadow: rgba(21, 38, 70, 0.08) 0px 2px 8px 0px;
  color: #115699;
}
.task-right .icon-box .disabled.icon,
.task-right .icon-box .disabled.icon:hover {
  opacity: 0.4;
}

.task-right .icon-box .icon {
  font-size: 24px;
  cursor: pointer;
  opacity: 0.8;
}
.task-right .icon-box .icon:hover {
  opacity: 1;
}
.task-right .icon-box .icon:first-child {
  margin-right: 10px;
}
.task-right-list {
  width: 105%;
  height: 330px;
  overflow: scroll;
  overflow-x: auto;
  overflow-y: auto;
}
.task-right-list ul {
  margin-right: 5%;
}
.task-right-list ul li {
  display: block;
  border-bottom: 1px solid #e1e1e1;
  line-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 20px;
}
.task-right-list ul li i {
  float: right;
  color: #4682b9;
  font-weight: normal;
}
.task-left .el-tabs__nav-wrap {
  width: 220px;
}
.task-el-tabs {
  position: relative;
}
.task-el-tabs .el-tabs__header {
  width: 220px;
  position: absolute;
  left: 0;
}
.task-el-tabs .el-tabs__content {
  position: static;
  overflow: inherit;
}
.task-el-tabs .el-tabs__nav {
  width: 100%;
  border-bottom: 1px solid #e1e1e1;
}
.task-el-tabs .el-tabs__item.is-top:nth-child(2) {
  padding: 0 !important;
}
.task-el-tabs .el-tabs__item.is-active {
  background: none;
  color: #4682b9;
  border-bottom: 1px solid #ff9900;
}
.task-el-tabs .el-tabs__item {
  margin: 0;
  padding: 0;
  width: 50%;
  text-align: center;
}
.data-wrap {
  overflow: hidden;
}
.data-title {
  color: #333333;
  font-family: "MicrosoftYaHeiUI-Bold";
  font-weight: bold;
  margin: 20px 20px 10px;
}
.data-list {
  margin-left: 20px;
}
.data-list dl {
  width: 19%;
  float: left;
  margin-right: 1%;
  border-radius: 5px;
  padding: 20px 30px;
  margin-top: 10px;
  color: #fff;
}
.data-list dl:nth-child(1),
.data-list dl:nth-child(10) {
  background-color: #4682b9;
}
.data-list dl:nth-child(2),
.data-list dl:nth-child(9) {
  background-color: #f5b346;
}
.data-list dl:nth-child(3),
.data-list dl:nth-child(8) {
  background-color: #92b471;
}
.data-list dl:nth-child(4),
.data-list dl:nth-child(7) {
  background-color: #ff8585;
}
.data-list dl:nth-child(5),
.data-list dl:nth-child(6) {
  background-color: #36b1ac;
}
.data-list dl dt {
  display: block;
  font-size: 16px;
}
.data-list dl dt strong {
  font-size: 26px;
  font-weight: normal;
  margin-right: 10px;
}
.data-list dl dd {
  display: block;
  margin-top: 10px;
}

.data-listYS {
  margin-left: 20px;
}
.data-listYS dl {
  width: 24%;
  float: left;
  margin-right: 1%;
  border-radius: 5px;
  padding: 10px 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #fff;
}
.data-listYS dl:nth-child(1) {
  background-color: #4682b9;
}
.data-listYS dl:nth-child(2) {
  background-color: #f5b346;
}
.data-listYS dl:nth-child(3) {
  background-color: #92b471;
}
.data-listYS dl:nth-child(4) {
  background-color: #ff8585;
}

.data-listYS dl dt {
  display: block;
  font-size: 20px;
}
.data-listYS dl dt strong {
  font-size: 20px;
  font-weight: normal;
  margin-right: 10px;
}
.data-listYS dl dd {
  display: block;
  font-size: 26px;
  margin-top: 20px;
  margin-left: 150px;
}

.data-tabs {
  margin: 40px 20px;
}
.data-el-tabs .el-tabs__nav-wrap::after {
  height: 1px;
  background: #e1e1e1;
}
.data-el-tabs .el-tabs__item.is-active {
  background-color: #4682b9;
}
.data-el-tabs .el-tabs__item {
  background-color: #ff8585;
  color: #fff;
}
canvas {
  border: 0;
  outline: none;
}
.dclrwMenu-active {
  color: red;
}
.arrow-top {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
  font-size: 0;
  display: inline-block;
  position: relative;
  margin-top: -4px;
  right: 2px;
}

.arrow-bottom {
  width: 0;
  height: 0;
  border-left: 8px solid transparent; /* 左边框的宽 */
  border-right: 8px solid transparent; /* 右边框的宽 */
  border-top: 8px solid white; /* 下边框的长度|高,以及背景色 */
  font-size: 0;
  display: inline-block;
  position: relative;
  margin-top: -4px;
  right: 2px;
}
/** 水印样式  **/
.watermark {
  position: fixed;
  bottom: 78%;
  left: 90%;
  width: 100px;
  height: 100px;
  font-size: 50px;
  font-style: italic;
  /*background-image: url('../../assets/images/flowStatus/adopt.png');*/
  background-repeat: repeat;
  pointer-events: none;
  opacity: 0.1; /* 可调整透明度 */
  z-index: 9999; /* 可调整图层顺序 */
}
</style>
